<template>
  <view class="form-container">
    <u-form :model="Form" ref="uForm" :border-bottom="false">
      <u-form-item :border-bottom="false">
        <u-input v-model="Form.name" placeholder="请输入真实姓名" :clearable="false" />
      </u-form-item>
      <u-form-item :border-bottom="false">
        <u-input
          class="left"
          v-model="Form.mobile"
          placeholder="请输入常用手机号"
          :clearable="false"
          :maxlength="11"
        />
        <view slot="right" v-show="isNeedCode === 1">
          <button class="get-code-btn" type="default" @click="getCode">
            <text>{{ getCodeBtnText }}</text>
          </button>
        </view>
      </u-form-item>
      <u-form-item :border-bottom="false" v-if="isNeedCode === 1">
        <u-input v-model="Form.code" placeholder="请输入短信验证码"  :clearable="false"/>
      </u-form-item>
      <u-form-item :border-bottom="false">
        <u-input v-model="Form.idCard" placeholder="请输入真实身份证号" :clearable="false" :maxlength="18"/>
      </u-form-item>
    </u-form>
    <view class="btn">
      <button type="default" @click="submit" class="form-sumbit">
        立即检测
      </button>
      <view><sloganTag /></view>
    </view>
    <view class="agreement">
      <u-checkbox
        v-model="checked"
        :disabled="false"
        shape="circle"
        active-color="#3745eb"
      >
        <text>我已阅读并且同意</text>
      </u-checkbox>
      <view class="agreement-list">
        <text @click="openPopup(item)" v-for="(item,index) in displayAgreements" :key="item[index]">{{ AgreementTitle[item]}}</text>
      </view>
    </view>

    <u-popup
      v-model="isPopupShow"
      mode="bottom"
      border-radius="14"
      :closeable="true"
    >
      <view class="popup-content">
        <view class="popup-title">{{ popupTitle }}</view>
        <scroll-view scroll-y="true" style="height: 600rpx;margin:10rpx 30rpx 0 30rpx">
          <text style="font-size:24rpx;">{{currentAgreement}}</text>
        </scroll-view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import sloganTag from "./sloganTag.vue";
import Agreement from "@/utils/agreements"
import { mapState, mapActions, mapMutations } from "vuex";

const AgreementTitle= {user_use:'《用户使用协议》',privacy_agreement: '《隐私协议》',data_analysis:'《数据分析》' }
export default {
  data() {
    return {
      getCodeBtnText: "获取验证码",
      Form: {},
      checked: false,
      isPopupShow: false,
      currentAgreement:'',
      AgreementTitle: AgreementTitle,
      popupTitle: ''
    };
  },
  computed: {
    ...mapState("Public", ["isNeedCode","displayAgreements"]),
    ...mapState("order", ["infoForm"]),
    // ...mapState("user", ["user"]),
    // ...mapState("Public", ["appId", "miniApp"]),
    // ...mapGetters("Public", ["getPlatformType"]),
       
  },
  mounted(){
    this.Form = this.infoForm
  },
  methods: {
    ...mapMutations("order", ["setInfoForm"]),
    ...mapActions('order',['cerateOrder']),
    getCode() {},
    submit(name) {
      console.log(name);
      if (!this.checked) {
        uni.showToast({
          title: "请阅读并且同意协议",
        });
        return;
      }
      console.log(this.Form);
      if (this.validate()) {
        this.setInfoForm(this.Form);
        this.cerateOrder()
      }
    },
    searchBank(){
      console.log(11);
    },
    openPopup(text) {
      this.isPopupShow = true;
      this.popupTitle = this.AgreementTitle[text];
      this.currentAgreement = Agreement[text]
    },
    validate() {
      let text = "";
      const idRe = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
      const telRe = /^[1][3,4,5,6.7,8,9][0-9]{9}$/
      console.log(this.Form.mobile,!telRe.test(this.Form.mobile))
      if (!this.Form.name) {
        text = "请输入姓名";
      } else if (!telRe.test(this.Form.mobile)) {
        text = "请输入正确手机号";
      } else if (this.isNeedCode === 1 && !this.Form.code) {
        // 判断是否检验验证码 1校验
        text = "请输入验证码";
      } else if (!idRe.test(this.Form.idCard)) text = "请输入正确身份证";
      if (!!text) {
        uni.showToast({
          title: text,
        });
      }
      return !text;
    },
  },
  components: {
    sloganTag,
  },
};
</script>

<style lang="scss" scoped>
.input-container {
  width: 100%;
}

/deep/ .u-form-item {
  padding: 0 0 10rpx 0;
}

/deep/ .u-form-item__body {
  border-radius: 10rpx;
  border: 1px solid #ccc;
  overflow: hidden;
  background-color: #f1f1f1;
}

/deep/ .u-input__input {
  background-color: #f1f1f1;
}

.get-code-btn {
  width: 200rpx;
  height: 60rpx;
  margin-right: 10rpx;
  line-height: 60rpx;
  text-align: center;
  font-size: 24rpx;
  color: white;
  background-color: #0040fb;
  border-radius: 10rpx;
}

.btn {
  position: relative;
  & > view {
    position: absolute;
    top: -12rpx;
    left: 63%;
  }
}

.form-sumbit {
  margin: 20px 20rpx;
  border-radius: 15rpx;
  color: white;
  background-image: linear-gradient(
    to right,
    rgb(245, 132, 7),
    rgb(254, 67, 22)
  );
}

.agreement {
  margin-top: 50rpx;
  display: flex;
  flex-flow: row nowrap;
  justify-content: left;
  align-items: center;

  & text {
    font-size: 22rpx;
    color: $uni-text-color-grey;
  }

  & .agreement-list>text {
    font-size:18rpx;
    color: #2d42fd;
  }
}

.popup-title{
  text-align: center;
  height: 60rpx;
  line-height: 60rpx;
}
</style>
